<template>
  <div class="app-container">
    <!--合同列表-->
    <div class="my-button">
      <el-button v-show="!isEditFlow" type="primary" @click="onEditFlow">编辑流程</el-button>
      <div v-show="isEditFlow">
        <el-button type="primary" @click="onAddMainFlow">添加主流程</el-button>
        <el-button type="success">确定</el-button>
        <el-button @click="isEditFlow=false">取消</el-button>
      </div>

    </div>

    <div class="flow-wrap">
      <div class="flow-chart">
        <div v-for="(char,index) in charData" :key="char.id" class="flow-group" :style="{top: 140*index+'px'}">
          <div class="c-rect">
            <div class="c-rect-name" title="点击查看信息" @click="dialogVisibleMain=true">{{ char.name }}</div>
            <div v-for="(child,childIndex) in char.children" :key="child.id">
              <div class="flow-circular" :style="{right:-100*(childIndex+1)+'px'}">节点{{ childIndex+1 }}</div>
            </div>
            <div v-show="isEditFlow" title="添加子节点" class="flow-circular add" :style="{right:-100*(char.children.length+1)+'px'}" @click="dialogVisible=true">+</div>
            <svg-icon class-name="down-icon" icon-class="down" />
          </div>
        </div>
        <div class="flow-group" :style="{top: 140*charData.length+'px'}">
          <div class="c-rect">
            <div class="">结束</div>
            <div style="height: 20px;width: 20px" />
          </div>
        </div>
      </div>

    </div>

    <el-dialog
      :title="(isEditFlow?(mainType?'增加':'修改'):'查看')+'主流程'"
      :visible.sync="dialogVisibleMain"
      width="600px"
      :close-on-click-modal="false"
      @closed="onCloseDialog('ruleFormMain')"
    >
      <el-form ref="ruleFormMain" :model="form" :rules="rules" label-width="120px">
        <el-form-item label="主流程名称：" prop="name">
          <el-input v-model="form.name" placeholder="请输入主流程名称" />
        </el-form-item>
        <el-form-item label="责任人：" prop="description">
          <el-select v-model="form.region" placeholder="请选择责任人">
            <el-option label="利马" value="shanghai" />
            <el-option label="张三" value="beijing" />
          </el-select>
        </el-form-item>
        <el-form-item label="备注：" prop="description">
          <el-input v-model="form.description" type="textarea" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisibleMain = false">取 消</el-button>
        <el-button type="primary" :loading="loading" @click="onConfrim">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="增加子节点"
      :visible.sync="dialogVisible"
      width="600px"
      :close-on-click-modal="false"
      @closed="onCloseDialog"
    >
      <el-form ref="ruleForm" :model="form" :rules="rules" label-width="120px">
        <el-form-item label="备注：" prop="description">
          <el-input v-model="form.description" type="textarea" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" :loading="loading" @click="onConfrim">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
const data = [
  {
    id: 1,
    name: '主流程1',
    children: [
      {
        id: 11,
        name: '节点1',
        isImprot: 0 // 1是重要节点
      },
      {
        id: 12,
        name: '节点2',
        isImprot: 0 // 1是重要节点
      }
    ]
  },
  {
    id: 2,
    name: '主流程2',
    children: [
      {
        id: 21,
        name: '节点1',
        isImprot: 0 // 1是重要节点
      },
      {
        id: 22,
        name: '节点2',
        isImprot: 0 // 1是重要节点
      }
    ]
  }
]
import formMixin from '@/mixins/formMixin'

const EDIT = 0
const ADD = 1

export default {
  name: 'Contracts',
  mixins: [formMixin],
  data() {
    return {
      charData: data,
      isEditFlow: false, // 是否编辑流程
      dialogVisibleMain: false,
      dialogVisible: false,
      mainType: ADD,
      formLabelWidth: '120px',
      form: {
        name: '',
        description: ''
      },
      rules: {
        name: [
          { required: true, message: '输入主流程名称', trigger: 'blur' }
        ]
      },
      formChild: {
        name: '',
        description: ''
      },
      rulesChild: {
        name: [
          { required: true, message: '输入节点名称', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    text(type) {
      if (this.isEditFlow === false) {
        return '查看'
      }
      return ''
    }
  },
  methods: {
    onEditFlow() {
      this.isEditFlow = true
    },
    onCloseDialog(name) {
      this.resetForm(name)
    },
    onConfrim() {
      // const form = this.form
      this.$refs['ruleForm'].validate((valid) => {
        console.log(valid)
        if (valid) {
          this.loading = true
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    onAddMainFlow() {
      this.dialogVisibleMain = true
      this.mainType = ADD
    }
  }
}
</script>

<style lang="scss" scoped >
  .flow-wrap {
    width: 100%;
    min-width: 800px;
    height: 650px;
    border: 1px solid #ccc;
    overflow: auto;
  }

  .flow-chart {
    position: relative;
    padding: 10px;
    user-select: none;

    .flow-group {
      position: relative;

      .c-rect {
        position: absolute;
        padding: 0 10px;
        min-width: 100px;
        height: 50px;
        line-height: 50px;
        color: #fff;
        background: #0078e5;
        text-align: center;
        .c-rect-name{
          cursor: pointer;
        }
        .flow-circular {
          cursor: pointer;
          position: absolute;
          right: -100px;
          top: 10px;
          width: 40px;
          height: 40px;
          line-height: 40px;
          font-size: 12px;
          border-radius: 50%;
          background: #ccc;

          &::after {
            content: '';
            position: absolute;
            left: -60px;
            top: 50%;
            transform: translateY(-50%);
            width: 60px;
            height: 1PX;
            background: #ccc;
          }

          &.add {
            // 添加按钮
            background: #42b983;
            font-size: 20px;
            cursor: pointer;
          }

          &.important {
            // 重要颜色节点
            background-color: red;
          }
        }
      }

      .down-icon {
        font-size: 50px;
        position: absolute;
        left: 50%;
        top: 68px;
        transform: translateX(-50%);
      }
    }

  }
</style>
